<template>
	<view class="content">
		<!-- 可提现余额 -->
		<view class="f1">
			<view class="f1-tixian">
				可提现余额
			</view>
			<text class="dou">分
				<text style="font-size: 100rpx; margin-left: 50rpx;">{{user.integral}}</text> 
			</text>
		</view>
		<!-- 提现积分 -->
		<view class="f2">
			<view class="f2-center">
				<view style="margin-left: 20rpx; padding-top: 40rpx;">提现积分</view>
				<view class="zong" style="margin-top: 30rpx; margin-left: 20rpx;">
					<text class="fen">分</text>
					<input class="num"  type="number" placeholder-style="font-size:$uni-font-size-lg;" 
					placeholder="积分现金比例为100:￥1" v-model="user.integral">
					<button type="button" class="btn" @click="toggleNum" hover-class="none">整数提现</button>
				</view>
				<u-divider text="" :hairline="true"  lineColor="#5f5f5f"></u-divider>
				<view class="tel">
					<!-- 新增一个view把text和input包起来，设置宽度后，点击按钮后才可以把input隐藏 起来而不影响整体宽度-->
					<view class="tel1">
						<text style="width: 100rpx;">电话:</text>
						<input type="tel" style="margin-left: 20rpx;" v-model.lazy="user.phone" v-show="isActive" placeholder="请输入电话号码">
					</view>
					<view style="display: flex; flex: 1;">
						<text style="font-size: 6px; color: #A8A8A8; margin-top: 10rpx;">获取绑定手机号</text>
						<!-- 按钮组件 -->
						<view class="container" :class="{ active: isActive }" @click="toggleActive">
						  <view class="ball" :class="{ active1: isActive }"></view>
						</view>
					</view>
				
				</view>
				<u-divider text="" :hairline="true"  lineColor="#5f5f5f"></u-divider>
				<view>
					<button class="button" @click="onClick()">申请提现</button>
				</view>
			</view>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'积分提现',
				isActive: true,//按钮的开关
				jifenneirong: '',// 积分换算的数据
				user:{},
			}
		},
		mounted(){
			this.user = uni.getStorageSync('user');
		},
		methods: {
			toggleActive() {//电话那行的点击按钮事件
				this.isActive = !this.isActive;
			},
			toggleNum(){//提取积分，按照目前有的积分把他换算成能换算
				this.jifenneirong = this.user.integral-this.jifenNum;
			},
			onClick(){ //申请提现按钮
				if(this.num && this.jifenneirong){ 
					uni.showModal({
					    content:'确定提现至当前手机号',
					    success(res){
					        if(res.confirm){
					            // 确认按钮被点击
					           this.user.integral=this.jifenneirong
							}
					    }
					})
				}else{
					uni.showModal({
					    content:'积分数或电话号码为空',
					    success(res){
					        if(res.confirm){
					            // 确认按钮被点击
					            uni.navigateTo({
									// 跳转到积分提现页面
					                url:'/pages/rewards/rewards'
					            })
							}
					    }
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: white;
	}
	.f1{
		background-color: #6FCF97;
		color: #f8f8f8;
		width: 100%;
		height: 400rpx;
		
		.f1-tixian{
			font-size:$uni-font-size-lg;
			margin-bottom: 60rpx;
			background-color: #6FCF97;
			margin-left: 20rpx;
			padding-top: 40rpx;
		}
		.dou{
			margin-left: 20rpx;
		}
	}
	.f2{
		margin-top: -150rpx;
		background-color: #f8f8f8;
		margin-left: 40rpx;
		margin-right: 40rpx;
		border-radius: 10rpx;
		height: 800rpx;
		
		.f2-center{
			.zong{
				display: flex;
				margin-bottom: 40rpx;
				.fen{
					font-size: 50rpx; 
					color: #f8f8f8;
					background-color: #3282b8; 
					border-radius: 5rpx;
				}
				.num{
					// flex: 1;
					margin-left: 20rpx;
					margin-top: 20rpx;
				}
				.btn{
					flex: 1;
					width: 200rpx; 
					color: #6FCF97;
				}
				> button::after{
					border: none;
				}
			}
			.tel{
				display: flex;
				margin-top: 40rpx;
				margin-left: 20rpx;
				margin-bottom: 20rpx;
				
				.tel1{
					flex: 1;
					width: 100%;
					display: flex;
				}
				.container {//按钮
				   margin-left: 20rpx;
					width: 100rpx;
					height: 50rpx;
					border: 1px solid #f2f2f2;
					position: relative;
					background-color: #d3d3d3;
					border-radius: 25rpx;
				    overflow: hidden;
					transition: 0.5s;//背景颜色变换时间
					}
				.ball {
				  
				  width: 50rpx;
				  height: 50rpx;
				  border-radius: 50%;
				  background-color: white;
				  position: absolute;
				  transition: transform 0.5s;//小球回来需要的时间
				}
				
					.active {//点击后背景变色
						background-color: #0bb119;
						transition: 1.5s;
					}
				
					.active1 {//点击后小球移动
						background-color: white;
						transform: translateX(50rpx);
						transition: transform 0.8s;
					}	
			}
			.button{
				margin-top: 200rpx;
				width: 400rpx;
				background-color: #6FCF97;
				color: #f8f8f8;
			}
		}
	}
</style>
